<template>
    <div class="app-container">
        <div class="appRightTop">
            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px">
                <el-form-item label="元数据标识">
                    <el-input v-model="queryParams.yuanshujubiaoshi" clearable />
                </el-form-item>
                <el-form-item label="元数据名">
                    <el-input v-model="queryParams.shujuming" clearable />
                </el-form-item>
                <el-form-item label="创建人">
                    <el-input v-model="queryParams.chuangjianren" clearable />
                </el-form-item>
                <el-form-item label="修改时间">
                    <el-date-picker v-model="queryParams.value6" type="daterange" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="text" @click="handleQuery" class="gotoseach">搜索</el-button>
                    <span type="text" @click="resetQuery" style="
                                color: #7483a6;
                                font-size: 16px;
                                font-weight: 500;
                                cursor: pointer;
                                marginleft: 20px;
                              ">重置</span>
                </el-form-item>
            </el-form>
        </div>
        <div style="padding-bottom: 22px">
          <div style="float: right">
            <i class="el-icon-setting iconstyle" @click="setTableColumn()"></i>
          </div>
        </div>
        <el-table :data="tableData" border show-header @selection-change="handleSelectionChange" max-height="380"
          row-key="index" class="ant-table-body tbody" @cell-dblclick="celldblclick">
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column v-for="(item, index) in currentColumn" :prop="item.prop" :label="item.label" :key="index"
            align="center" show-overflow-tooltip>
            <!-- @change="handleCheck(scope.row, scope.row.index)" -->
            <!-- 标准集id -->
            <template slot-scope="scope">
              <span v-if="item.prop === 'catalogueId'">
                <span>{{ scope.row.catalogueId }}</span>
              </span>
              <!-- 标准名 -->
              <span v-else-if="item.prop === 'standardName'">
                <span>{{ scope.row.standardName }}</span>
              </span>
              <!-- 标准中文名 -->
              <span v-else-if="item.prop === 'standardChName'">
                <span>{{ scope.row.standardChName }}</span>
              </span>
              <!-- 字段类型 -->
              <span v-else-if="item.prop === 'standardType'">
                <span>{{ scope.row.standardType }}</span>
              </span>
              <!-- 业务含义 -->
              <span v-else-if="item.prop === 'comment'">
                <span>{{ scope.row.comment }}</span>
              </span>
              <!-- 参考文件id -->
              <span v-else-if="item.prop === 'fileId'">
                <span>{{ scope.row.fileId }}</span>
              </span>
              <!-- 数据长度 -->
              <span v-else-if="item.prop === 'fieldLength'">
                <span>{{ scope.row.fieldLength }}</span>
              </span>
              <!-- 创建人 -->
              <span v-else-if="item.prop === 'createdBy'">
                <span>{{ scope.row.createdBy }}</span>
              </span>
              <!-- 创建时间 -->
              <span v-else-if="item.prop === 'createdTime'">
                <span>{{ scope.row.createdTime }}</span>
              </span>
              <!-- 更新人 -->
              <span v-else-if="item.prop === 'modifiedBy'">
                <span>{{ scope.row.modifiedBy }}</span>
              </span>
              <!-- 更新时间 -->
              <span v-else-if="item.prop === 'modifiedTime'">
                <span>{{ scope.row.modifiedTime }}</span>
              </span>
            </template>
          </el-table-column>
          <el-table-column align="center" fixed="right" label="操作">
                <template slot-scope="scope">
                    <!-- 业务数据 -->
                    <el-tooltip class="item" effect="dark" content="业务数据" placement="top">
                        <el-button type="text" class="nolockColor" @click="dataPartition(scope.row)">
                            <!-- <span class="iconfont look">&#xe66b;</span> -->
                            业务数据
                        </el-button>
                    </el-tooltip>
                </template>
          </el-table-column>
        </el-table>
        <div class="paginationBigbox">
            <div class="paginationbox">
                <el-pagination @size-change="handleSizeChange" :current-page.sync="queryParams.current"
                    @current-change="handleCurrentChange" :page-size="queryParams.size" layout="total,prev, pager, next"
                    background :total="pageTotal" ref="pagination">
                </el-pagination>
            </div>
        </div>
        <AddstandarTable :allHeaderList="allHeaderList" v-if="dynamicTableDialog" :detailflag="dynamicTableDialog"
      :checkedColumnList="checkedColumnList" @closeDynamicTable="closeDynamicTable">
    </AddstandarTable>
    </div>
</template>
  
<script>
import moment from "moment";
import AddstandarTable from "./componnets/AddstandarTable.vue";

export default {
    name: "businessData",
    components: {
        AddstandarTable,
    },
    data() {
        return {
            // 总条数
            pageTotal: 12,
            // 遮罩层
            loading: false,
            //动态表头
            dynamicTableDialog:false,
            //搜索条件
            queryParams: {
                catalogueId: "", // 标准集id
                standardId: "", //标准编号
                standardChName: "", //标准中文名
                standardName: "", //标准英文名
                page: 1,
                size: 10,
            },
            //table的数据
            postList: [
                {
                    serviceName: '角色名称1',
                    typeId: '普通角色',
                    useStatus: 0,
                    createTime: '2021-09-14     10:00:00',
                    authorName: 'admin'
                },
                {
                    serviceName: '角色名称1',
                    typeId: '普通角色',
                    useStatus: 0,
                    createTime: '2021-09-14     10:00:00',
                    authorName: 'admin'
                },
            ],
            allHeaderList:[],
            currentColumn:[],
            multipleSelection:[],
                //传给子页面的表格数据
            checkedColumnList: [],
             tableData:[],
            //批量删除中选中的项list
            selection: [],
            //数据权限的表单
            ruleForm: {},
            rules: {
                region: [
                    { required: true, message: '请选择权限范围', trigger: 'change' }
                ],
            }
        };
    },
    mounted() {

    },
    methods: {
        //搜索
        handleQuery() {

        },
        //重置
        resetQuery() {

        },
        //业务数据点击确认
        dataPartition() {
            this.$router.push('/Metadata/metadataList')
        },
        //处理时间
        // 时间格式化
        formatTime(time) {
            // return utils.rTime(time);
            return moment(time).format("YYYY-MM-DD HH:mm:ss");
        },
        handleSizeChange(val) {
            this.queryParams.size = val;
        },
        handleCurrentChange(val) {
            this.queryParams.current = val;
        },
        //配置表头
        setTableColumn() {
            this.currentColumn.forEach((item) => {
                this.allHeaderList.forEach((i) => {
                    if (item.prop == i.prop) {
                        this.currentColumn.push(i);
                        this.checkedColumnList.push(i.label);
                    }
                });
            });
            this.dynamicTableDialog = true;
        },
           //获取表头配置
    getAllTableConfigInfo() {
    //   getAllTableConfig()
    //     .then((response) => {
    //       console.log(response, "00000000000000");
    //       this.allHeaderList = response.data;
    //     })
    //     .catch((err) => {
    //       // this.$message.error(err.message);
    //       console.log(err);
    //     });
    },
    //获取动态表头
    getTableTou() {
      //不是新建
    //   getTableConfig()
    //     .then((response) => {
    //       if (response.data) {
    //         let headerList = response.data.headerList;
    //         //   //编辑 -获取的列头数据
    //         this.currentColumn = [];
    //         headerList.forEach((item) => {
    //           this.allHeaderList.forEach((i) => {
    //             if (item == i.prop) {
    //               this.currentColumn.push(i);
    //               this.checkedColumnList.push(i.label);
    //             }
    //           });
    //         });
    //         this.checkedColumnList = [...new Set(this.checkedColumnList)];
    //       }
    //     })
    //     .catch((err) => {
    //       // this.$message.error(err.message);
    //       console.log(err);
    //     });
    },
    //关闭配置表头弹框
    closeDynamicTable(arr) {
      this.dynamicTableDialog = false;
      if (arr) {
        this.currentColumn = arr;
      }
    },
        //勾选change
        handleSelectionChange(val) {
      console.log(val, '选中的值');
      this.multipleSelection = val;
    },
       //实现双击复制时间
       celldblclick(row, column, cell, event) {
      if (event.type === "dblclick") {
        var rowType = column.property;
        var save = function (e) {
          e.clipboardData.setData("text/plain", row[rowType]);
          e.preventDefault(); //阻止默认行为
        };
        // 添加copy事件
        document.addEventListener("copy", save);
        //复制选中的文字到剪贴板;
        document.execCommand("copy");
        //移除addEventListener的事件
        document.removeEventListener("copy", save);
      }
      //复制成功后提示
      this.$message({
        message: "复制 " + row[rowType] + " 成功",
        type: "success",
      });
    },
    }
};
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss";
@import "~@/assets/styles/variables.scss";
@import "~@/assets/styles/CommonStyle.scss";
</style>
  